﻿@{
    ViewBag.Title = "Edit";
   
}

<div class="breadcrumbs" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="#">Bất Động Sản</a>

            <span class="divider">
                <i class="icon-angle-right arrow-icon"></i>
            </span>
        </li>

        <li>
            <a href="#"></a>

            <span class="divider">
                <i class="icon-angle-right arrow-icon"></i>
            </span>
        </li>
        <li class="active">Thêm mới</li>
    </ul>
    <!--.breadcrumb-->

</div>
<div class="page-content">
    <div class="row-fluid">
        <h3 class="header smaller lighter green">Thông tin cơ bản</h3>
        <div class="span12">
            <div class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="form-field-1">Loại BĐS</label>

                    <div class="controls">
                        <input type="text" id="form-field-1" placeholder="Username">
                    </div>
                </div>
            </div>
            <div class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="form-field-1">Thành phố/tỉnh</label>

                    <div class="controls">
                        <input type="text" id="form-field-1" placeholder="Username">
                    </div>
                </div>
            </div>
            <div class="form-horizontal">
                <div class="control-group">
                     <label class="control-label" for="form-field-1">  Quận/huyện</label>
                    
                    <div class="controls">
                        <input type="text" id="form-field-1" placeholder="Username">
                    </div>
                </div>
            </div>
            <div class="form-horizontal">
                <div class="control-group">
                    <label class="control-label">Cho</label>

                    <div class="controls">
                        <div class="span1">
                            <label>
                            <input name="form-field-radio" type="radio">
                            <span class="lbl">Bán</span>
                        </label>

                        </div>
                        <div class="span1">  
                            <label>
                            <input name="form-field-radio" type="radio">
                            <span class="lbl">Thuê</span>
                        </label>
                        </div>
                        


                    </div>
                </div>
            </div>
             <div class="form-horizontal">
                <div class="control-group">
                     <label class="control-label" for="form-field-1">Diện tích</label>                   
                    <div class="controls">
                         <div class="span3">
                             <input type="text" id="form-field-1" placeholder="Username">
                         </div>
                        <div class="span1">-</div>
                         <div class="span3">
                             <input type="text" id="form-field-1" placeholder="Username">
                         </div>
                        
                    </div>
                </div>
            </div>
             
            <div class="form-horizontal">
                <div class="control-group">
                     <label class="control-label" for="form-field-1">Phòng tắm</label>                   
                    <div class="controls">
                         <div class="span3">
                             <input type="text" id="form-field-1" placeholder="Username">
                         </div>
                        <div class="span1">-</div>
                         <div class="span3">
                             <input type="text" id="form-field-1" placeholder="Username">
                         </div>
                        
                    </div>
                </div>
            </div>

             <div class="form-horizontal">
                <div class="control-group">
                     <label class="control-label" for="form-field-1">Phòng ngủ</label>                   
                    <div class="controls">
                         <div class="span3">
                             <input type="text" id="form-field-1" placeholder="Username">
                         </div>
                        <div class="span1">-</div>
                         <div class="span3">
                             <input type="text" id="form-field-1" placeholder="Username">
                         </div>
                        
                    </div>
                </div>
            </div>
            <div class="form-horizontal">
                <div class="control-group">
                    <label for="form-field-8">Mô tả tóm tắt</label>                  
                    <div class="controls">
                        <textarea class="span12 limited" id="form-field-9" data-maxlength="50" maxlength="50"></textarea>
                        
                    </div>
                </div>
            </div>
            <div class="form-horizontal">
                <div class="control-group">
                    <label for="form-field-8">Mô tả chi tiết</label>                  
                    <div class="controls">
                       	<div class="wysiwyg-editor" id="editor1"></div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="space"></div>
    <div class="row-fluid">
        <h3 class="header smaller lighter green">Tiện ích</h3>

    </div>
    <div class="space"></div>
    <!--/row-->
    <div class="row-fluid">
        <h3 class="header smaller lighter green">Bản đồ</h3>

    </div>
    <div class="space"></div>
    <!--/row-->
    <div class="row-fluid">
        <h3 class="header smaller lighter green">Hình ảnh</h3>

    </div>
    <div class="space"></div>
    <!--/row-->
</div>

@section Bottom{
  	<script type="text/javascript">
  	    $(function () {

  	        function showErrorAlert(reason, detail) {
  	            var msg = '';
  	            if (reason === 'unsupported-file-type') { msg = "Unsupported format " + detail; }
  	            else {
  	                console.log("error uploading file", reason, detail);
  	            }
  	            $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>' +
                 '<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
  	        }

  	        //$('#editor1').ace_wysiwyg();//this will create the default editor will all buttons

  	        //but we want to change a few buttons colors for the third style
  	        $('#editor1').ace_wysiwyg({
  	            toolbar:
                [
                    'font',
                    null,
                    'fontSize',
                    null,
                    { name: 'bold', className: 'btn-info' },
                    { name: 'italic', className: 'btn-info' },
                    { name: 'strikethrough', className: 'btn-info' },
                    { name: 'underline', className: 'btn-info' },
                    null,
                    { name: 'insertunorderedlist', className: 'btn-success' },
                    { name: 'insertorderedlist', className: 'btn-success' },
                    { name: 'outdent', className: 'btn-purple' },
                    { name: 'indent', className: 'btn-purple' },
                    null,
                    { name: 'justifyleft', className: 'btn-primary' },
                    { name: 'justifycenter', className: 'btn-primary' },
                    { name: 'justifyright', className: 'btn-primary' },
                    { name: 'justifyfull', className: 'btn-inverse' },
                    null,
                    { name: 'createLink', className: 'btn-pink' },
                    { name: 'unlink', className: 'btn-pink' },
                    null,
                    { name: 'insertImage', className: 'btn-success' },
                    null,
                    'foreColor',
                    null,
                    { name: 'undo', className: 'btn-grey' },
                    { name: 'redo', className: 'btn-grey' }
                ],
  	            'wysiwyg': {
  	              //  fileUploadError: showErrorAlert
  	            }
  	        }).prev().addClass('wysiwyg-style2');



  	        $('#editor2').css({ 'height': '200px' }).ace_wysiwyg({
  	            toolbar_place: function (toolbar) {
  	                return $(this).closest('.widget-box').find('.widget-header').prepend(toolbar);
  	            },
  	            toolbar:
                [
                    'bold',
                    { name: 'italic', title: 'Change Title!', icon: 'icon-leaf' },
                    'strikethrough',
                    'underline',
                    null,
                    'insertunorderedlist',
                    'insertorderedlist',
                    null,
                    'justifyleft',
                    'justifycenter',
                    'justifyright'
                ],
  	            speech_button: false
  	        });


  	        $('[data-toggle="buttons-radio"]').on('click', function (e) {
  	            var target = $(e.target);
  	            var which = parseInt($.trim(target.text()));
  	            var toolbar = $('#editor1').prev().get(0);
  	            if (which == 1 || which == 2 || which == 3) {
  	                toolbar.className = toolbar.className.replace(/wysiwyg\-style(1|2)/g, '');
  	                if (which == 1) $(toolbar).addClass('wysiwyg-style1');
  	                else if (which == 2) $(toolbar).addClass('wysiwyg-style2');
  	            }
  	        });





  	        //Add Image Resize Functionality to Chrome and Safari
  	        //webkit browsers don't have image resize functionality when content is editable
  	        //so let's add something using jQuery UI resizable
  	        //another option would be opening a dialog for user to enter dimensions.
  	        if (typeof jQuery.ui !== 'undefined' && /applewebkit/.test(navigator.userAgent.toLowerCase())) {

  	            var lastResizableImg = null;
  	            function destroyResizable() {
  	                if (lastResizableImg == null) return;
  	                lastResizableImg.resizable("destroy");
  	                lastResizableImg.removeData('resizable');
  	                lastResizableImg = null;
  	            }

  	            var enableImageResize = function () {
  	                $('.wysiwyg-editor')
                    .on('mousedown', function (e) {
                        var target = $(e.target);
                        if (e.target instanceof HTMLImageElement) {
                            if (!target.data('resizable')) {
                                target.resizable({
                                    aspectRatio: e.target.width / e.target.height,
                                });
                                target.data('resizable', true);

                                if (lastResizableImg != null) {//disable previous resizable image
                                    lastResizableImg.resizable("destroy");
                                    lastResizableImg.removeData('resizable');
                                }
                                lastResizableImg = target;
                            }
                        }
                    })
                    .on('click', function (e) {
                        if (lastResizableImg != null && !(e.target instanceof HTMLImageElement)) {
                            destroyResizable();
                        }
                    })
                    .on('keydown', function () {
                        destroyResizable();
                    });
  	            }

  	            enableImageResize();

  	            /**
                //or we can load the jQuery UI dynamically only if needed
                if (typeof jQuery.ui !== 'undefined') enableImageResize();
                else {//load jQuery UI if not loaded
                    $.getScript($assets+"/js/jquery-ui-1.10.3.custom.min.js", function(data, textStatus, jqxhr) {
                        if('ontouchend' in document) {//also load touch-punch for touch devices
                            $.getScript($assets+"/js/jquery.ui.touch-punch.min.js", function(data, textStatus, jqxhr) {
                                enableImageResize();
                            });
                        } else	enableImageResize();
                    });
                }
                */
  	        }


  	    });
		</script>

}